<!--
 * Copyright (c) 2017-2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
 * which is available at https://www.apache.org/licenses/LICENSE-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
-->

<div class="bootstrap-vertical-nav">

    <button [@paletteButtonState]="paletteButtonRootState" id="palette_root" class="btn btn-primary" type="button"
            (click)="toggleRootState()" style="transform: rotate(-90deg) translateY(-135px) translateX(-135px)">
        <div *ngIf="paletteRootState === 'shrunk'">Open Palette</div>
        <div *ngIf="paletteRootState === 'extended'">Hide Palette</div>
    </button>

    <div [@paletteItemState]="paletteRootState" class="palette-items-wrapper">
        <accordion [closeOthers]="oneAtATime">
            <accordion-group *ngFor="let ns of entityTypes.groupedNodeTypes; let i = index;">
                <div accordion-heading>{{ns.text}}</div>
                <ul class="nav flex-column nav-tabs">
                    <li *ngFor="let child of ns.children" class="nav-item">
                        <div class="btn btn-light btn-sm btn-block"
                             (mousedown)="generateNewNode($event)">{{ child.text }}
                        </div>
                    </li>
                </ul>
            </accordion-group>
        </accordion>
    </div>
</div>

